<template>
	<view style="width: 100%;background-color: #EEEEEE;">
		
		
		<!-- 小程序顶部样式修改 -->
		<view v-if="isHome == 0">
			<cu-custom bgColor="bg-gradual-orange" :isBack="true">
				<block slot="content">订单详情</block>
			</cu-custom>
		</view>
		<view v-else-if="isHome == 1">
			<cu-custom bgColor="bg-gradual-orange" :isBack="false">
				<block slot="left">
					<text @tap="toPage()" class="cuIcon-homefill" style="font-size: 40rpx;"></text>
				</block>
				<block slot="content">订单详情</block>
			</cu-custom>
		</view>
		
		<view style="margin: 20upx;">
			<view>
				<view v-if="orderInfo.status == 3 && orderInfo.personalLocation != null" style="height: 530rpx;">
					<view>
						<view class="map_box">
						  <map class="navi_map" id="navi_map" :longitude="longitude" :latitude="latitude" scale="12" :markers="markers" :polyline="polyline"></map>
						</view>
					
						<view class="text_box">
						  <view class="text">{{distance}}</view>
						</view>
					</view>
				</view>
				
					
				<view class="cu-card">
					<view class="cu-item shadow cu-card-custom" style="margin: 10rpx;">
						<view class="flex flex-column align-center solid-bottom" style="margin-left: 20rpx;line-height: 60rpx;">
							订单联系人资料
						</view>
						<view class="" style="margin-left: 20rpx;">
							<text class='cuIcon-title text-blue'></text>
							<text style="">
								姓名: {{ orderInfo.contact }}
							</text>
						</view>
						<view class="" style="margin-left: 20rpx;">
							<text class='cuIcon-title text-blue'></text>
							<text style="line-height: 55rpx;">
								电话: {{ orderInfo.mobile }}
							</text>
						</view>
					</view>
				</view>	
				
				<view v-if="orderInfo.personalName" class="cu-card">
					<view class="cu-item shadow cu-card-custom" style="margin: 10rpx;">
						<view class="flex flex-column align-center solid-bottom" style="margin-left: 20rpx;line-height: 60rpx;">
							维修人员联系人资料
						</view>
						<view class="" style="margin-left: 20rpx;">
							<text class='cuIcon-title text-blue'></text>
							<text style="">
								姓名: {{ orderInfo.personalName }}
							</text>
						</view>
						<view class="" style="margin-left: 20rpx;">
							<text class='cuIcon-title text-blue'></text>
							<text style="line-height: 55rpx;">
								电话: {{ orderInfo.personalMobile }}
							</text>
						</view>
					</view>
				</view>	
				
				<view class="cu-card">
					<view class="cu-item shadow cu-card-custom" style="margin: 10rpx;">
						<view class="flex flex-column align-center solid-bottom" style="margin-left: 20rpx;line-height: 60rpx;">
							维修详情
						</view>
						<view class="" style="margin-left: 20rpx;">
							<text class='cuIcon-title text-blue'></text>
							<text style="line-height: 55rpx;">
								维修描述: {{ orderInfo.serviceDescripion }}
							</text>
						</view>
						<view class="" style="margin-left: 20rpx;">
							<text class='cuIcon-title text-blue'></text>
							<text style="line-height: 55rpx;">
								维修备注: {{ orderInfo.remark }}
							</text>
						</view>
					</view>
				</view>
				
				<view class="cu-card">
					<view class="cu-item shadow cu-card-custom" style="margin: 10rpx;">
						<view class="flex flex-column align-center solid-bottom" style="margin-left: 20rpx;line-height: 60rpx;">
							付款详情
						</view>
						<view class="" style="margin-left: 20rpx;">
							<text class='cuIcon-title text-blue'></text>
							<text style="">
								{{ tip }}
							</text>
						</view>
						<view class="" style="margin-left: 20rpx;">
							<text class='cuIcon-title text-blue'></text>
							<text style="line-height: 55rpx;">
								{{ serviceFee }}
							</text>
						</view>
						<view class="" style="margin-left: 20rpx;">
							<text class='cuIcon-title text-blue'></text>
							<text style="line-height: 55rpx;">
								{{ totalAmount }}
							</text>
						</view>
					</view>
				</view>	
				
				<view class="cu-card">
					<view class="cu-item shadow cu-card-custom" style="margin: 10rpx;">
						<view class="flex flex-column align-center solid-bottom" style="margin-left: 20rpx;line-height: 60rpx;">
							订单状态
						</view>
						<view class="" style="margin-left: 20rpx;">
							<text class='cuIcon-title text-blue'></text>
							<text style="">
								{{ status }}
							</text>
						</view>
						<view class="" style="margin-left: 20rpx;">
							<text class='cuIcon-title text-blue'></text>
							<text style="line-height: 55rpx;">
								下单时间: {{ orderInfo.createdTime }}
							</text>
						</view>
						<view v-if="orderInfo.finishedTime" class="" style="margin-left: 20rpx;">
							<text class='cuIcon-title text-blue'></text>
							<text style="line-height: 55rpx;">
								结束时间: {{ orderInfo.finishedTime }}
							</text>
						</view>
					</view>
				</view>	
				
				<view v-if="orderInfo.status == 4 && !orderInfo.starLevel">
					<!-- 未评价 -->
					<view class="cu-card">
						<view class="cu-item shadow cu-card-custom" style="margin: 10rpx;">
							<view class="flex flex-column align-center solid-bottom" style="margin-left: 20rpx;line-height: 60rpx;">
								评价
							</view>
							<view class="" style="margin-left: 20rpx;">
								<uni-rate :value="0" @change="onStarChange()" />
							</view>
							<view class="" style="margin-left: 20rpx;">
								<input @input="reviewInput" placeholder="请输入评价" style="border-top: solid 0.2upx #C8C7CC;" class="input-class space" >
							</view>
						</view>
					</view>	
					<view style="margin-top: 20rpx;">
						<button style="background-color: #ff7c00;" type="primary" class="primary" @tap="rate">点评</button>
					</view>
				</view>
				
				<view v-if="orderInfo.status == 4 && orderInfo.starLevel">
					<!-- 已评价 -->
					<view class="cu-card">
						<view class="cu-item shadow cu-card-custom" style="margin: 10rpx;">
							<view class="flex flex-column align-center solid-bottom" style="margin-left: 20rpx;line-height: 60rpx;">
								评价
							</view>
							<view class="" style="margin-left: 20rpx;">
								<uni-rate :disabled="true" :value="orderInfo.starLevel" />
							</view>
							<view class="" style="margin-left: 20rpx;">
								<input disabled="true" style="border-top: solid 0.2upx #C8C7CC;" class="input-class space" :value="orderInfo.review">
							</view>
						</view>
					</view>	
				</view>
					
			</view>
		</view>
	</view>
</template>

<script>
	
	let statusEnum = [
		{id: 1, desc: '发起订单，未支付'},
		{id: 2, desc: '已支付，等待接单'},
		{id: 3, desc: '已接单，正在赶往现场'},
		{id: 4, desc: '订单完成'},
		{id: 5, desc: '取消订单'}
	]
	
	import amapFile from '../../common/amap-wx.js'
	import uniRate from '../../components/uni-rate/uni-rate.vue'
	import util from '../../common/util.js'
	
	export default {
		components: {
			uniRate
		},
		data() {
			return {
				isHome: 0, //顶部显示home 还是back
				orderId: "",
				orderInfo: {},
				tip: 0,
				serviceFee: '',
				totalAmount: '',
				status: '',
				review: '',
				star: 0,
				isRateOver: 0,
				
				//地图所需
				latitude: 39.91,
				longitude: 116.69,
				markers: [{// 地图上的起点标志
				  iconPath: "../../static/img/mapicon_navi_s.png",
				  id: 0,
				  latitude: 39.91,
				  longitude: 116.69,
				  width: 23,
				  height: 33
				},{//地图上的终点标志
				  iconPath: "../../static/img/mapicon_navi_e.png",
				  id: 0,
				  latitude: 39.91,
				  longitude: 116.70 ,
				  width: 24,
				  height: 34
				}],
				distance: '',
				polyline: [],
				origin: '',
				destination: ''
				
			}
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			this.orderId = option.orderId
			if(! this.orderId){
				//从列表中点击进入详情页面，所有数据都已经被加载了
				this.getOrderInfoByStorage()
			}else{
				//下单后的详情页面，根据order获取详情内容
				this.getOrderInfo()
				this.isHome = 1
			}
			
			this.tip = '跑腿费: ' + Number(util.getDicByKey('tip')).toFixed(1)
		},
		onPullDownRefresh() {
			this.getOrderInfo()
			this.tip = '跑腿费: ' + Number(util.getDicByKey('tip')).toFixed(1)
		},
		methods: {
			toPage(){
				// 此处其他跳转不好使
				uni.navigateBack({
					delta: 2
				})
			},
			reviewInput(e){
				this.review = e.detail.value
			},
			rate(){	
				if(this.star == 0){
					uni.showToast({
						title: '请点击进行评分！',
						duration: 2000,
						icon: "none"
					});
					return ;
				}
				let that = this
				uni.showModal({
					title: '点评',
					content: '是否确认点评',
					success: function (res) {
						if (res.confirm) {
							that.$api.rate({
								review: that.review,
								rate: that.star,
								orderId: that.orderInfo.id
							}).then((res)=>{
								if(res.data.data == 1){
									that.orderInfo.starLevel = that.star
									that.orderInfo.review = that.review
									that.isRateOver = 1
								}
							}).catch((err)=>{
								console.log('request fail', err);
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			onStarChange(e) {
				this.star = e.value
			},
			getOrderInfoByStorage(){
				this.orderInfo = uni.getStorageSync('orderDetail')
				this.orderId = this.orderInfo.id
				this.serviceFee = '维修服务费: ' + Number(this.orderInfo.serviceAmount).toFixed(1)
				this.totalAmount = '实际支付: ' + Number(this.orderInfo.realAmount).toFixed(1)
				let tempStatus = statusEnum.filter(e => e.id === this.orderInfo.status)
				this.status = tempStatus[0].desc
				
				// 地图设置
				if(this.orderInfo.location && this.orderInfo.personalLocation){
					// 地图中心位置
					this.latitude = this.orderInfo.location.latitude
					this.longitude = this.orderInfo.location.longitude
					
					// 驾车路线图
					this.origin = this.orderInfo.location.longitude + ',' + this.orderInfo.location.latitude
					this.destination = this.orderInfo.personalLocation.longitude + ',' + this.orderInfo.personalLocation.latitude
					
					// 地图标记点
					this.markers[0].latitude = this.orderInfo.location.latitude
					this.markers[0].longitude = this.orderInfo.location.longitude
					
					this.markers[1].latitude = this.orderInfo.personalLocation.latitude
					this.markers[1].longitude = this.orderInfo.personalLocation.longitude
					
					this.initMap()
				}
				
			},
			async getOrderInfo(){
				let res = await this.$api.getOrderInfo({orderId: this.orderId})
				this.orderInfo = res.data.data
				this.serviceFee = '维修服务费: ' + Number(this.orderInfo.serviceAmount).toFixed(1)
				this.totalAmount = '实际支付: ' + Number(this.orderInfo.realAmount).toFixed(1)
				let tempStatus = statusEnum.filter(e => e.id === this.orderInfo.status)
				this.status = tempStatus[0].desc
				
				// 地图设置
				if(this.orderInfo.location && this.orderInfo.personalLocation){
					// 地图中心位置
					this.latitude = this.orderInfo.location.latitude
					this.longitude = this.orderInfo.location.longitude
					
					// 驾车路线图
					this.origin = this.orderInfo.location.longitude + ',' + this.orderInfo.location.latitude
					this.destination = this.orderInfo.personalLocation.longitude + ',' + this.orderInfo.personalLocation.latitude
					
					// 地图标记点
					this.markers[0].latitude = this.orderInfo.location.latitude
					this.markers[0].longitude = this.orderInfo.location.longitude
					
					this.markers[1].latitude = this.orderInfo.personalLocation.latitude
					this.markers[1].longitude = this.orderInfo.personalLocation.longitude
					
					this.initMap()
				}
			},
			initMap(){
				var that = this;
				
				var myAmapFun = new amapFile.AMapWX({key: util.getDicByKey('amapKey')});
				myAmapFun.getDrivingRoute({
					//路线规划，两个位置
				  origin: that.origin,
				  destination: that.destination,
				  success: function(data){
					var points = [];
					if(data.paths && data.paths[0] && data.paths[0].steps){
					  var steps = data.paths[0].steps;
					  for(var i = 0; i < steps.length; i++){
						var poLen = steps[i].polyline.split(';');
						for(var j = 0;j < poLen.length; j++){
						  points.push({
							longitude: parseFloat(poLen[j].split(',')[0]),
							latitude: parseFloat(poLen[j].split(',')[1])
						  })
						} 
					  }
					}
					that.polyline = [{
						points: points,
						color: "#0091ff",
						width: 6
					}]
					if(data.paths[0] && data.paths[0].distance){
						that.distance = '维修人员距您还有' + Number(Number(data.paths[0].distance) / 1000).toFixed(2) + '千米'
					}
				  },
				  fail: function(info){
				
				  }
				})
			}
		}
	}
</script>

<style>
	.input-class{
		margin-left: 10rpx;
		height: 100rpx;
		width: 100%;
		font-size: 25rpx;
	}
	
	.title-class{
		font-size: 25upx;
		color: #929292;
	}
	
	.space{
		display:block;
		white-space:nowrap; 
		overflow:hidden; 
		text-overflow:ellipsis;
	}
	/* map start */
	.flex-style{
	  display: -webkit-box;
	  display: -webkit-flex;
	  display: flex;
	}
	.flex-item{
	  height: 35px; 
	  line-height: 35px;
	  text-align: center;
	  -webkit-box-flex: 1;
	  -webkit-flex: 1;
	  flex: 1
	}
	.flex-item.active{
	  color:#0091ff;
	}
	.map_box{
	  position:absolute;
	  /* top: 30rpx; */
	  left: 0px;
	  right: 0px;
	  height: 500rpx;
	}
	#navi_map{
	  width: 100%;
	  height: 100%;
	}
	.text_box{
	  position:absolute;
	  top: 160rpx;
	  height: 90px;
	  left: 0px;
	  right: 0px;
	}
	.text_box .text{
	  margin: 15px;
	  color: red;
	}
	.detail_button{
	  position:absolute;
	  bottom: 30px;
	  right: 10px;
	  padding: 3px 5px;
	  color: #fff;
	  background: #0091ff;
	  width:50px;
	  text-align:center;
	  border-radius:5px;
	}
	/* map end */
	
	.display_none{
		display: none;
	}
</style>
